<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>运动会管理系统</title>

	<meta name="keywords" content="运动会管理系统" />
	<!-- 引入 layui.css -->
	<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	<!-- 引入 layui.js -->
	<script src="//unpkg.com/layui@2.6.8/dist/layui.js" />

	<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<link href="css/login.css" rel="stylesheet" type="text/css" media="all" />
	<!-- js -->
	<script src="js/jquery.min.js"></script>
	<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
</head>

<body>
	<!-- main -->
	<div class="main">
		<h1>运动会管理系统</h1>
		<div class="login-form">
			<div class="sap_tabs w3ls-tabs">
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list">
						<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>登录</span></li>
						<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><label>/</label><span>注册</span></li>
					</ul>
					<div class="clear"> </div>
					<div class="resp-tabs-container">
						<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
							<div class="login-agileits-top">
								<!-- 登录表单 -->
								<form action="#" name="loginForm">
									<p>用户名</p>
									<input type="text" name="name" value="" required="" />
									<p>密码</p>
									<input type="password" name="password" value="" required="" />

								</form>
								<input type="checkbox" id="brand" value="">
								<label for="brand"><span></span>记住我?</label>
								</form>
								<button class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-radius layui-btn-normal"
									onclick="loginSubmit()">登录</button>
							</div>
						</div>
						<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
							<div class="login-agileits-top sign-up">
								<!-- 注册表单 -->
								<form action="#" name="registForm">
									<p>姓名</p>
									<input type="text" name="name" required="" value="" />
									<p>邮箱 </p>
									<input type="text" name="email" required="" value="" />
									<p>密码</p>
									<input type="password" name="password" placeholder="" required="" value="" />
									<p>您的身份</p>
									<input type="radio" name="identity" value="1" title="管理员"><span
										style="color: white; padding:0 10px">管理员</span></input>
									<input type="radio" name="identity" value="2" title="运动员"><span
										style="color: white; padding:0 10px">运动员</span></input>
									<input type="radio" name="identity" value="3" title="裁判员"><span
										style="color: white; padding:0 10px">裁判员</span></input>
									<input type="radio" name="identity" value="4" title="志愿者"><span
										style="color: white; padding:0 10px">志愿者</span></input>
									<input type="checkbox" id="brand1" value="">
									<label for="brand1"><span></span>我同意注册</label>
								</form>
								<button class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-radius layui-btn-normal"
									onclick="registSubmit()">注册</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- ResponsiveTabs js -->
	<script type="text/javascript">
		$(document).ready(function () {
			$('#horizontalTab').easyResponsiveTabs({
				type: 'default', //Types: default, vertical, accordion           
				width: 'auto', //auto or any width like 600px
				fit: true // 100% fit in a container
			});
		});
	</script>
	<script>
		// 登录
		function loginSubmit() {
			console.log("登录", loginForm.name.value);
			const requestParams = {
				username: loginForm.name.value,
				password: loginForm.password.value
			}
			$.ajax({
				url: 'http://localhost:8080/login',
				type: 'get',
				data: requestParams,
				async: true, //是否异步提交,默认为true
				dataType: 'JSON', //提交的数据格式为JSON,返回的数据格式也是json
				success: function (data) {
					console.log(data);
					// 根据角色不同进行跳转
					if (data.roleId == 1) {
						window.location.href = "admin.html";
					} else if (data.roleId == 2) {
						window.location.href = "athlete.html";
					} else if (data.roleId == 3) {
						window.location.href = "umpire.html";
					} else {
						window.location.href = "volunteer.html";
					}

				},
				error: function (data) {
					// // alert("请联系管理员");
					layer.msg('请输入正确的用户密码', {
						time: 1500, //20s后自动关闭
					});
				}
			})

		}
		// 注册
		function registSubmit() {
			console.log(registForm.identity.value);
			console.log("注册");
			const requestParams = {
				username: registForm.name.value,
				password: registForm.password.value,
				roleId: registForm.identity.value
			}
			$.ajax({
				url: 'http://localhost:8080/register',
				type: 'get',
				data: requestParams,
				async: true, //是否异步提交,默认为true
				dataType: 'JSON', //提交的数据格式为JSON,返回的数据格式也是json
				success: function (data) {
					window.location.href = "index.html";
				},
				error: function (data) {
					layer.msg('请完整填写表单选项', {
						time: 1500, //20s后自动关闭
					});
				}
			})
		}
	</script>
</body>

</html>